<template>
    <div class="record">
        <gltitle :titleSize="titleSize" :is_mt="is_mt" v-if="!$store.state.isApp"></gltitle>
        <div class="record-select" :class="{'ispc':mobile==2}">
          <ul>
            <li  v-for="(item,k) in tabData" :key="k" :class="{on:item.id === status}" @click="onTab(item)">
              {{item.name}}
            </li>
          </ul>
        </div>
        <div class="record-con">
            <van-list v-model="loading" :finished="finished" :loading-text="$t('load.loading')" @load="onLoad">
                <van-cell v-for="(item, index) in list" :key="index">
                    <div class="order-info" @click="$router.push(`/recordinfo?sn=${item.sn}`)">
                            <div class="type">
                                <div v-if="item.status == 1">{{$t('new.desc100')}}</div>
                                <div v-else-if="item.status==0 && item.profitStatus=='-1' && item.timeInterval==0">{{$t('new.desc88')}}</div>
                                <div v-else>
                                    <p>{{ $t('new.desc90') }}</p>
                                    <p>
                                        <van-count-down :time="item.laveSeconds * 1000"
                                            @finish="handlerFinsh($event, item.sn, index)" />
                                    </p>
                                </div>
                            </div>
                            <div class="info">
                                <div class="result-box">
                                  <span class="label">{{$t('new.doc27')}}</span>
                                  <div class="null-status" v-if="item.status==0">{{$t('new.desc103')}}</div>
                                  <span class="result" v-else>
                                     <span class="red"   v-if="ismax(item) == 0">
                                       {{ $t('new.doc24')}}
                                     </span>
                                      <span class="green"  v-else>
                                        {{$t('new.doc23')}}
                                      </span>

                                  </span>
                                </div>
                                <div class="time">
                                  <div class="date">{{item.settleDate?item.settleDate:item.createTime}}</div>
                                </div>
                                <div class="line"></div>
                                <div class="amount">
                                   <div class="label">{{$t('new.doc28')}}</div>
                                   <div class="value">${{item.amount}}</div>
                                </div>

                                <div class="amount yinli">
                                  <div class="label">{{$t('new.desc96')}}</div>
                                  <div class="null-status" v-if="item.status==0">{{$t('new.desc103')}}</div>
                                  <div class="money" :class="{color1:item.profitStatus==0}" v-else><span v-if="item.profitStatus==0">$</span> <span v-else>-$</span>{{item.incomeAmount}}</div>
                                </div>


<!--                                <div class="info-icon">{{item.coinPair}} <p v-if="item.type==0">{{$t('new.desc62')}}</p><p class="iconcolor" v-else>{{$t('new.desc63')}}</p></div>
                                <div class="info-num">{{$t('new.desc101')}}<span>{{item.amount}}</span> </div>
                                <div class="info-price">
                                    <p>{{$t('new.desc101')}}<span>{{item.buyPrice}}</span></p>
                                    <p v-if="item.status==1">{{$t('new.desc105')}}<span>{{item.openingPrice}}</span></p>
                                    <p v-else>{{$t('new.desc102')}}<span>{{item.currenPrice}}</span></p>
                                </div>-->

                            </div>

                    </div>
                </van-cell>
            </van-list>
            <div class="show-null" v-if="showNull">
                <img src="../../assets/images/fianacial_no_data.png" alt="" />
                <p>{{$t('new.desc104')}}</p>
            </div>
        </div>
        <!-- 状态 -->
        <van-popup v-model="showType" position="bottom" round :closeable="true">
            <div class="showModal">
                <div class="title">{{ $t('new.desc99') }}</div>
                <div class="modal-list">
                    <div class="list-info" v-for="item in typeAll" :key="item.id" @click="handlerType(item)">
                        <div>{{ item.name }}</div>
                        <img src="../../assets/images/check_normal.png" alt="" v-if="item.name != typeName" />
                        <img src="../../assets/images/checked_look_agreement_img.png" alt="" v-else />
                    </div>
                </div>
            </div>
        </van-popup>
        <!-- 盈亏 -->
        <van-popup v-model="showProfit" position="bottom" round :closeable="true">
            <div class="showModal">
                <div class="title">{{ $t('new.desc61') }}</div>
                <div class="modal-list">
                    <div class="list-info" v-for="item in profitList" :key="item.id" @click="handlerProfit(item)">
                        <div>{{ item.name }}</div>
                        <img src="../../assets/images/check_normal.png" alt="" v-if="item.name != profitName" />
                        <img src="../../assets/images/checked_look_agreement_img.png" alt="" v-else />
                    </div>
                </div>
            </div>
        </van-popup>
        <!-- 币种 -->
        <van-popup v-model="showIcon" position="bottom" round :closeable="true">
            <div class="showModal">
                <div class="title">{{ $t('new.desc98') }}</div>
                <div class="modal-list">
                    <div class="list-info" v-for="item in iconList" :key="item.id" @click="handlerIcon(item)">
                        <div>{{ item.buyCoinName }}</div>
                        <img src="../../assets/images/check_normal.png" alt="" v-if="item.buyCoinName != iconName" />
                        <img src="../../assets/images/checked_look_agreement_img.png" alt="" v-else />
                    </div>
                </div>
            </div>
        </van-popup>
      <bottom_nav :activeTitle="activeTitle"></bottom_nav>

    </div>

</template>

<script>
export default {
    data() {
        return {
          cid:0,
          tabData:[
            {name:this.$t('staff.doc35'),id:''},
            {name:this.$t('new.doc16'),id:0},
            {name:this.$t('new.doc17'),id:1}
          ],
            mobile:localStorage.getItem('ismobile'),
            finished: false,
          activeTitle:this.$t("new.doc15"),
            loading: false,
            showProfit: false,
            showType: false,
            showIcon: false,
            titleSize: this.$t('new.desc91'),
            is_mt: true,
            typeName: this.$t('new.desc92'),
            profitName: this.$t('new.desc95'),
            iconName: this.$t('new.desc98'),
            status: '',
            profitStatus: '',
            buyCoinId: '',
            typeAll: [
                {
                    id: '',
                    name: this.$t('new.desc92')
                }, {
                    id: 0,
                    name: this.$t('new.desc93')
                }, {
                    id: 1,
                    name: this.$t('new.desc94')
                }
            ],
            profitList: [
                {
                    id: '',
                    name: this.$t('new.desc95')
                }, {
                    id: '-1',
                    name: this.$t('new.desc88')
                }, {
                    id: 0,
                    name: this.$t('new.desc96')
                }, {
                    id: 2,
                    name: this.$t('new.desc97')
                }
            ],
            iconList: [
                {
                    id: '',
                    buyCoinName: this.$t('new.desc98')
                }
            ],
            list: [],
            page:1,
            showNull:false
        }
    },
    mounted() {
        this.$post(this.URL.member.iconListConfig, {}).then(res => {
            if (res.code == 0) {
                this.iconList = this.iconList.concat(res.data)
            }
        })
    },
    methods: {
        ismax(item) {
          let num = 0;
          if(item.profitStatus==0&&item.type==0){
             num=1
          }
          if(item.profitStatus==1&&item.type==1){
            num=1
          }
          return num;
        },
        handlerFinsh(e, sn, i) {
            this.$post(this.URL.user.orderinfo, {
                sn: sn
            }).then(res => {
                if (res.code == 0) {
                    this.list[i] = res.data;
                    this.userOrderlist = this.list;
                }
            })
        },
        onLoad() {
            setTimeout(() => {
                this.$post(this.URL.user.order, {
                    page: this.page,
                    status: this.status,
                    profitStatus: this.profitStatus,
                    buyCoinId: this.buyCoinId
                }).then(res => {
                    if (res.code == 0) {
                        if(res.data.list !=''){
                            res.data.list.forEach(e =>{
                                e.coinPair=e.coinPair.replace('/USDT','')
                            })
                        }
                        if (this.page == 1) {
                            this.list = res.data.list
                        } else {
                            this.list = this.list.concat(res.data.list)
                        }
                        if(this.list.length==0){
                            this.showNull=true;
                        }
                        if (res.data.list.length > 9) {
                            this.page++;
                        }
                        this.loading = false;
                        if (this.list.length >= parseFloat(res.data.page.count)) {
                            this.finished = true;
                        }
                    } else {
                        this.$toast(res.message)
                    }
                })
            }, 500);
        },
        handlerType(item) {
            this.typeName = item.name;
            this.status = item.id;
            this.showType = false;
            this.page=1;
            this.list=[];
            this.finished=false;
            this.showNull=false;
            this.onLoad()
        },
        handlerProfit(item) {
            this.profitName = item.name;
            this.profitStatus = item.id;
            this.showProfit = false;
            this.page=1;
            this.list=[];
            this.finished=false;
            this.showNull=false;
            this.onLoad()
        },
        handlerIcon(item) {
            this.iconName = item.buyCoinName;
            this.buyCoinId = item.buyCoinId;
            this.showIcon = false;
            this.showNull=false;
            this.page=1;
            this.list=[];
            this.finished=false;
            this.onLoad()
        },
      onTab(item){
        this.status = item.id;
        this.showType = false;
        this.page=1;
        this.list=[];
        this.finished=false;
        this.showNull=false;
        this.onLoad()
      }

    }
}
</script>

<style lang="less" scoped>
.record {
    min-height: 100vh;

    .record-select {
        position: fixed;
        top: 1.2rem;
        left: 5%;
        width: 90%;
        z-index: 5;
        background: #fff;
       border-radius: 100px;
      ul {
        display: flex;
        align-items: center;
        width: 100%;
        background:#fff;
        border-radius: 100px;
        height: 40px;
        line-height: 40px;
        li {
          padding: 0rem .1rem;
          text-align: center;
          flex:1;
          color: #888888;
          margin-right: 10px;
          &:nth-child(1){
            flex: 0.6;
          }
          &:nth-child(2){
            flex: 0.6;
          }
          &:last-child{
            margin-right: 0;
          }
          &.on {
            height: 100%;
            color: #fff;
            background: #713FF5;
            border-radius: 100px;
          }
        }
      }

        .select-item {
            flex: 0 0 30%;
            height: .8rem;
            border: 0.02rem solid #E8E9EB;
            border-radius: .08rem;
            font-size: .26rem;
            box-sizing: border-box;background: #131e30;

            img {
                width: .26rem;
                margin-left: .1rem;
                height: .16rem;
            }

            &:first-child {
                margin-left: .2rem;
            }

            &:last-child {
                margin-right: 0.2rem;
            }
        }
    }

    .record-con {
        padding: 2.5rem .24rem 1.2rem .24rem;
        /deep/ .van-cell{
          background: #fff;
          margin-bottom: .2rem;
          border-radius: .2rem;

            padding: 0;
            &::after{
                border-bottom: 0;
            }
        }
        .order-info{
            display: flex;
            padding: .3rem .4rem;
            justify-content: space-between;
            overflow: hidden;
            .type{
                flex: 0 0 .8rem;
              padding-right: .2rem;
                margin-top: .2rem;
                font-size: .24rem;
              display: none;
                color: #666666;
                /deep/ .van-count-down{
                    font-size: .2rem;
                }
            }
            .info{
                flex: 1;
                .result-box{
                  display: flex;
                  justify-content: space-between;
                  color: #98969E;
                  .label{
                     color:#2D2D2D
                  }
                  .result{
                    .red{
                      color: #EF5755;
                    }
                    .green{
                      color: #2ECA88;
                    }
                  }
                }
               .time{
                .date{
                  font-size: .24rem;
                  color: #98969E;
                  word-break: break-all;
                }
                .money{
                  padding: 0.43rem 0 0 0;
                  font-size: .32rem;
                  color: #FF383A;
                }
                .color1{
                  color: #5EBA89;
                }
                .null-status{
                  margin-top: .3rem;
                  color: #333;
                }
              }
                .line{
                  margin-top: 5px;
                   height: 1px;
                   background: #F3F3F3;
                }
                .amount{
                  margin-top: 10px;
                  display: flex;
                  justify-content: space-between;
                  .label{
                    color: #98969E;
                    font-size: 14px;
                  }
                  .value{
                    font-size: 14px;
                    color: rgba(45, 45, 45, 1);
                  }
                }
               .yinli{
                  .money{
                    font-size: 14px;
                    color: rgba(239, 87, 85, 1);

                  }
                 .color1{
                   font-size: 14px;
                   color: rgba(46, 202, 136, 1);
                 }
               }

                .info-icon{
                  color: #fff;
                    display: flex;
                    font-size: .3rem;
                    p{
                        height: .36rem;
                        margin:0.05rem 0 0 .2rem;
                        background: #5EBA89;
                        padding: 0 .2rem;
                        line-height: .36rem;
                        font-size: .2rem;
                        color: #fff;
                        border-radius: 0.08rem;
                    }
                    .iconcolor{
                        background:#FF383A;
                    }
                }
                .info-num,.info-price{
                    display: flex;
                    font-size: .22rem;
                    color: #999999;
                    span{
                        color: #666666;
                    }
                }
                .info-price p:first-child{
                    margin-right: .2rem;
                }
            }

        }
        .show-null{
            padding: 2rem 0;
            text-align: center;
            font-size: .28rem;
            color: #666666;
            img{
                width: 2rem;
                margin-bottom: .2rem;
            }
        }
    }

    .showModal {
        padding: 0 .2rem .5rem;

        .title {
            padding: .3rem 0;
            text-align: center;
            font-size: .3rem;
            border-bottom: 0.01rem solid #E8E9EB;
        }

        .list-info {
            padding: .2rem 0;
            display: flex;
            justify-content: space-between;
            border-bottom: 0.01rem solid #E8E9EB;
            font-size: .28rem;
            color: #333;

            img {
                width: .48rem;
                height: .48rem;
            }
        }
    }
}
.modal-list {
  height: 5rem;
  overflow: auto;
}
</style>
